<template>
  <div class="warpper1"
    :style="{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }">
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    <button @click="navigateToAppVue">点击显示子组件</button>
  </div>
  <div id="wrapper" :style="{ display: 'flex', alignItems: 'center', justifyContent: 'center' }"></div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

// 定义一个函数来处理导航
const navigateToAppVue = () => {
  if (route.path === '/app-vue') {
    // 如果当前路径是 /app-vue，则跳转到首页
    router.push({ path: '/' }); // 假设你的首页路径是 '/'
  } else {
    // 否则，导航到 /app-vue 路径
    router.push({ path: '/app-vue' });
  }
};
</script>
